<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单号处理工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#86909C',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="container mx-auto px-4 py-8 max-w-5xl">
        <header class="text-center mb-10">
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">单号处理工具</h1>
            <p class="text-neutral-dark">高效处理各类单号数据，生成对应链接并进行匹配</p>
        </header>

        <!-- 新增功能：批量打开网页 -->
        <section class="bg-white rounded-xl p-6 mb-8 card-shadow border-l-4 border-blue-500">
            <div class="flex items-center mb-4">
                <div class="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center mr-3">
                    <i class="fa fa-globe text-blue-500"></i>
                </div>
                <h2 class="text-xl font-semibold text-gray-800">功能：批量打开网页</h2>
            </div>
            
            <div class="mb-4">
                <label for="batch-urls" class="block text-sm font-medium text-gray-700 mb-1">输入网页链接（每行一个）：</label>
                <textarea id="batch-urls" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="例如：
https://www.example.com
https://www.google.com
https://www.taobao.com"></textarea>
            </div>
            
            <div class="flex flex-wrap gap-3 mb-2">
                <button id="open-batch-urls" class="bg-blue-500 text-white px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-external-link mr-2"></i>批量打开所有链接
                </button>
                <button id="clear-batch-urls" class="bg-gray-200 text-gray-700 px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-eraser mr-2"></i>清空链接
                </button>
            </div>
            
            <div id="batch-urls-message" class="mt-2 text-sm hidden"></div>
        </section>

        <!-- 单个单号快速查询（双向匹配） -->
        <section class="bg-white rounded-xl p-6 mb-8 card-shadow border-l-4 border-primary">
            <div class="flex items-center mb-4">
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                    <i class="fa fa-search-plus text-primary"></i>
                </div>
                <h2 class="text-xl font-semibold text-gray-800">功能：单个单号双向查询</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label for="backend-order" class="block text-sm font-medium text-gray-700 mb-1">后台单号：</label>
                    <input type="text" id="backend-order" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="输入19位后台单号">
                    <p class="text-xs text-neutral-dark mt-1">19位数字格式</p>
                </div>
                <div>
                    <label for="merchant-order" class="block text-sm font-medium text-gray-700 mb-1">商家单号：</label>
                    <input type="text" id="merchant-order" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="输入19位商家单号">
                    <p class="text-xs text-neutral-dark mt-1">19位数字格式</p>
                </div>
            </div>
            
            <div class="flex flex-wrap gap-3 mb-2">
                <button id="open-order-detail" class="bg-primary text-white px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-file-text-o mr-2"></i>打开订单详情
                </button>
                <button id="open-logistics-detail" class="bg-secondary text-white px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-truck mr-2"></i>打开物流详情
                </button>
                <button id="clear-single-inputs" class="bg-gray-200 text-gray-700 px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-eraser mr-2"></i>清空输入
                </button>
            </div>
            
            <div id="single-order-message" class="mt-2 text-sm hidden"></div>
        </section>

        <!-- 功能一：生成物流查询网址 -->
        <section class="bg-white rounded-xl p-6 mb-8 card-shadow">
            <div class="flex items-center mb-4">
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                    <i class="fa fa-truck text-primary"></i>
                </div>
                <h2 class="text-xl font-semibold text-gray-800">功能一：生成物流查询网址</h2>
            </div>
            
            <div class="mb-4">
                <label for="logistics-orders" class="block text-sm font-medium text-gray-700 mb-1">输入单号（每行一个）：</label>
                <textarea id="logistics-orders" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="例如：4672082559173541422"></textarea>
            </div>
            
            <div class="flex flex-wrap gap-3 mb-4">
                <button id="generate-logistics" class="bg-primary text-white px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-link mr-2"></i>生成网址
                </button>
                <button id="open-all-logistics" class="bg-secondary text-white px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-external-link mr-2"></i>批量打开
                </button>
            </div>
            
            <div id="logistics-result" class="mt-4 p-4 bg-neutral rounded-lg hidden">
                <h3 class="font-medium text-gray-800 mb-2">生成结果：</h3>
                <div id="logistics-links" class="space-y-2 max-h-60 overflow-y-auto"></div>
                <div id="logistics-message" class="mt-3 text-sm text-green-600"></div>
            </div>
        </section>

        <!-- 功能二：输入对应单号数据 -->
        <section class="bg-white rounded-xl p-6 mb-8 card-shadow">
            <div class="flex items-center mb-4">
                <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-3">
                    <i class="fa fa-exchange text-accent"></i>
                </div>
                <h2 class="text-xl font-semibold text-gray-800">功能二：输入对应单号数据</h2>
            </div>
            
            <div class="mb-4">
                <label for="mapping-orders" class="block text-sm font-medium text-gray-700 mb-1">输入对应单号（每行两个，用空格分隔：后台单号 商家单号）：</label>
                <textarea id="mapping-orders" rows="6" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="例如：
2867475361334635662	4672741971248541422
4672459298070138404	4672735200375541422"></textarea>
            </div>
            
            <div class="mb-4">
                <button id="save-mapping" class="bg-accent text-white px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-save mr-2"></i>保存对应关系
                </button>
                <div id="mapping-message" class="mt-3 text-sm text-green-600"></div>
            </div>
            
            <div id="mapping-count" class="text-sm text-neutral-dark mt-2 hidden">
                已保存 <span id="saved-pairs">0</span> 组单号对应关系
            </div>
        </section>

        <!-- 功能三：提取待取件单号并匹配 -->
        <section class="bg-white rounded-xl p-6 card-shadow">
            <div class="flex items-center mb-4">
                <div class="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center mr-3">
                    <i class="fa fa-search text-secondary"></i>
                </div>
                <h2 class="text-xl font-semibold text-gray-800">功能三：提取待取件单号并匹配</h2>
            </div>
            
            <div class="mb-4">
                <label for="order-content" class="block text-sm font-medium text-gray-700 mb-1">输入订单详情文本：</label>
                <textarea id="order-content" rows="8" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="粘贴包含订单信息的文本内容，系统将自动提取含'待取件'的单号"></textarea>
            </div>
            
            <div class="flex flex-wrap gap-3 mb-4">
                <button id="extract-orders" class="bg-secondary text-white px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-filter mr-2"></i>提取单号
                </button>
                <button id="open-all-orders" class="bg-primary text-white px-5 py-2.5 rounded-lg flex items-center btn-hover">
                    <i class="fa fa-external-link mr-2"></i>批量打开
                </button>
                <button id="copy-backend-orders" class="bg-accent text-white px-5 py-2.5 rounded-lg flex items-center btn-hover hidden">
                    <i class="fa fa-copy mr-2"></i>复制所有后台单号
                </button>
            </div>
            
            <div id="extraction-result" class="mt-4 p-4 bg-neutral rounded-lg hidden">
                <h3 class="font-medium text-gray-800 mb-2">提取结果：</h3>
                <div id="extracted-links" class="space-y-3 max-h-80 overflow-y-auto"></div>
                <div id="extraction-message" class="mt-3 text-sm text-green-600"></div>
            </div>
        </section>
    </div>

    <script>
        // 存储单号对应关系 (key: 商家单号, value: 后台单号)
        let orderMappings = {};
        // 反向映射 (key: 后台单号, value: 商家单号)
        let reverseMappings = {};
        
        // 存储当前生成的物流链接
        let currentLogisticsLinks = [];
        // 存储当前提取的订单链接
        let currentExtractedLinks = [];
        // 存储当前提取到的后台单号
        let currentBackendOrders = [];

        // 新增：批量打开网页功能
        document.getElementById('open-batch-urls').addEventListener('click', function() {
            const input = document.getElementById('batch-urls').value.trim();
            const messageEl = document.getElementById('batch-urls-message');
            
            if (!input) {
                messageEl.textContent = '请输入网页链接后再打开';
                messageEl.className = 'mt-2 text-sm text-red-600';
                messageEl.classList.remove('hidden');
                return;
            }
            
            // 按行分割输入的链接
            const urls = input.split('\n')
                .map(url => url.trim())
                .filter(url => url !== '');
            
            if (urls.length === 0) {
                messageEl.textContent = '未找到有效的网页链接';
                messageEl.className = 'mt-2 text-sm text-red-600';
                messageEl.classList.remove('hidden');
                return;
            }
            
            // 验证并批量打开链接
            let validCount = 0;
            urls.forEach(url => {
                // 简单的URL格式验证
                if (/^https?:\/\/.*/i.test(url)) {
                    window.open(url, '_blank');
                    validCount++;
                }
            });
            
            // 显示结果信息
            if (validCount === 0) {
                messageEl.textContent = '没有有效的网页链接（请确保链接以http://或https://开头）';
                messageEl.className = 'mt-2 text-sm text-red-600';
            } else if (validCount < urls.length) {
                messageEl.textContent = `已打开 ${validCount} 个有效链接，忽略了 ${urls.length - validCount} 个无效链接`;
                messageEl.className = 'mt-2 text-sm text-yellow-600';
            } else {
                messageEl.textContent = `已成功打开 ${validCount} 个链接`;
                messageEl.className = 'mt-2 text-sm text-green-600';
            }
            messageEl.classList.remove('hidden');
        });

        // 新增：清空链接按钮
        document.getElementById('clear-batch-urls').addEventListener('click', function() {
            document.getElementById('batch-urls').value = '';
            document.getElementById('batch-urls-message').classList.add('hidden');
        });

        // 单个单号双向查询功能
        // 后台单号输入变化时触发匹配
        document.getElementById('backend-order').addEventListener('input', function() {
            const backendOrder = this.value.trim();
            const merchantInput = document.getElementById('merchant-order');
            const messageEl = document.getElementById('single-order-message');
            
            // 清空商家单号输入（如果不是通过匹配填充的）
            if (backendOrder === '') {
                merchantInput.value = '';
                messageEl.classList.add('hidden');
                return;
            }
            
            // 验证单号格式
            if (!/^\d{19}$/.test(backendOrder)) {
                messageEl.textContent = '请输入有效的19位数字后台单号';
                messageEl.className = 'mt-2 text-sm text-red-600';
                messageEl.classList.remove('hidden');
                merchantInput.value = '';
                return;
            }
            
            // 查找匹配的商家单号
            const matchedMerchant = reverseMappings[backendOrder];
            if (matchedMerchant) {
                merchantInput.value = matchedMerchant;
                messageEl.textContent = '已匹配到对应的商家单号';
                messageEl.className = 'mt-2 text-sm text-green-600';
                messageEl.classList.remove('hidden');
            } else {
                merchantInput.value = '';
                messageEl.textContent = '未找到匹配的商家单号，请先在功能二添加对应关系';
                messageEl.className = 'mt-2 text-sm text-neutral-dark';
                messageEl.classList.remove('hidden');
            }
        });

        // 商家单号输入变化时触发匹配
        document.getElementById('merchant-order').addEventListener('input', function() {
            const merchantOrder = this.value.trim();
            const backendInput = document.getElementById('backend-order');
            const messageEl = document.getElementById('single-order-message');
            
            // 清空后台单号输入
            if (merchantOrder === '') {
                backendInput.value = '';
                messageEl.classList.add('hidden');
                return;
            }
            
            // 验证单号格式
            if (!/^\d{19}$/.test(merchantOrder)) {
                messageEl.textContent = '请输入有效的19位数字商家单号';
                messageEl.className = 'mt-2 text-sm text-red-600';
                messageEl.classList.remove('hidden');
                backendInput.value = '';
                return;
            }
            
            // 查找匹配的后台单号
            const matchedBackend = orderMappings[merchantOrder];
            if (matchedBackend) {
                backendInput.value = matchedBackend;
                messageEl.textContent = '已匹配到对应的后台单号';
                messageEl.className = 'mt-2 text-sm text-green-600';
                messageEl.classList.remove('hidden');
            } else {
                backendInput.value = '';
                messageEl.textContent = '未找到匹配的后台单号，请先在功能二添加对应关系';
                messageEl.className = 'mt-2 text-sm text-neutral-dark';
                messageEl.classList.remove('hidden');
            }
        });

        // 清空输入按钮
        document.getElementById('clear-single-inputs').addEventListener('click', function() {
            document.getElementById('backend-order').value = '';
            document.getElementById('merchant-order').value = '';
            document.getElementById('single-order-message').classList.add('hidden');
        });

        // 打开订单详情
        document.getElementById('open-order-detail').addEventListener('click', function() {
            const merchantOrder = document.getElementById('merchant-order').value.trim();
            const backendOrder = document.getElementById('backend-order').value.trim();
            const messageEl = document.getElementById('single-order-message');
            
            // 优先使用商家单号（订单详情链接需要商家单号）
            let orderNumber = merchantOrder || backendOrder;
            
            if (!orderNumber || !/^\d{19}$/.test(orderNumber)) {
                messageEl.textContent = '请输入有效的19位数字单号';
                messageEl.className = 'mt-2 text-sm text-red-600';
                messageEl.classList.remove('hidden');
                return;
            }
            
            // 如果只有后台单号，使用反向映射获取商家单号
            if (!merchantOrder && backendOrder) {
                orderNumber = reverseMappings[backendOrder] || backendOrder;
            }
            
            const url = `https://trade.tmall.com/detail/orderDetail.htm?spm=tbpc.boughtlist.order_detail.1.69092e8dK25SxJ&bizOrderId=${orderNumber}`;
            window.open(url, '_blank');
            
            messageEl.textContent = '已打开订单详情页面';
            messageEl.className = 'mt-2 text-sm text-green-600';
            messageEl.classList.remove('hidden');
        });

        // 打开物流详情
        document.getElementById('open-logistics-detail').addEventListener('click', function() {
            const merchantOrder = document.getElementById('merchant-order').value.trim();
            const backendOrder = document.getElementById('backend-order').value.trim();
            const messageEl = document.getElementById('single-order-message');
            
            // 优先使用商家单号（物流链接需要商家单号）
            let orderNumber = merchantOrder || backendOrder;
            
            if (!orderNumber || !/^\d{19}$/.test(orderNumber)) {
                messageEl.textContent = '请输入有效的19位数字单号';
                messageEl.className = 'mt-2 text-sm text-red-600';
                messageEl.classList.remove('hidden');
                return;
            }
            
            // 如果只有后台单号，使用反向映射获取商家单号
            if (!merchantOrder && backendOrder) {
                orderNumber = reverseMappings[backendOrder] || backendOrder;
            }
            
            const url = `https://market.m.taobao.com/app/dinamic/pc-trade-logistics/home.html?spm=tbpc.orderdetail.order_logistics.1.75cf6aa6mjujq0&orderId=${orderNumber}`;
            window.open(url, '_blank');
            
            messageEl.textContent = '已打开物流详情页面';
            messageEl.className = 'mt-2 text-sm text-green-600';
            messageEl.classList.remove('hidden');
        });

        // 功能一：生成物流查询网址
        document.getElementById('generate-logistics').addEventListener('click', function() {
            const input = document.getElementById('logistics-orders').value.trim();
            const resultContainer = document.getElementById('logistics-result');
            const linksContainer = document.getElementById('logistics-links');
            const messageContainer = document.getElementById('logistics-message');
            
            if (!input) {
                messageContainer.textContent = '请输入单号后再生成网址';
                messageContainer.className = 'mt-3 text-sm text-red-600';
                resultContainer.classList.remove('hidden');
                linksContainer.innerHTML = '';
                currentLogisticsLinks = [];
                return;
            }
            
            // 清空之前的结果
            linksContainer.innerHTML = '';
            currentLogisticsLinks = [];
            
            // 按行分割输入
            const orders = input.split('\n').filter(order => order.trim() !== '');
            
            // 生成链接
            orders.forEach(order => {
                const trimmedOrder = order.trim();
                // 验证单号格式（19位数字）
                if (/^\d{19}$/.test(trimmedOrder)) {
                    const url = `https://market.m.taobao.com/app/dinamic/pc-trade-logistics/home.html?spm=tbpc.orderdetail.order_logistics.1.75cf6aa6mjujq0&orderId=${trimmedOrder}`;
                    currentLogisticsLinks.push(url);
                    
                    const linkElement = document.createElement('div');
                    linkElement.className = 'flex items-center justify-between p-2 bg-white rounded border border-gray-100 hover:border-primary/30 transition-colors';
                    linkElement.innerHTML = `
                        <span class="text-sm text-gray-800 truncate max-w-[70%]">${trimmedOrder}</span>
                        <a href="${url}" target="_blank" class="text-primary text-sm hover:underline flex items-center">
                            <i class="fa fa-external-link mr-1"></i> 打开
                        </a>
                    `;
                    linksContainer.appendChild(linkElement);
                } else {
                    const invalidElement = document.createElement('div');
                    invalidElement.className = 'p-2 bg-red-50 rounded border border-red-100';
                    invalidElement.innerHTML = `<span class="text-sm text-red-600">无效的单号格式: ${trimmedOrder}（应为19位数字）</span>`;
                    linksContainer.appendChild(invalidElement);
                }
            });
            
            // 显示结果和消息
            messageContainer.textContent = `成功生成 ${currentLogisticsLinks.length} 个有效网址`;
            messageContainer.className = 'mt-3 text-sm text-green-600';
            resultContainer.classList.remove('hidden');
        });

        // 批量打开物流链接
        document.getElementById('open-all-logistics').addEventListener('click', function() {
            if (currentLogisticsLinks.length === 0) {
                const messageContainer = document.getElementById('logistics-message');
                messageContainer.textContent = '没有可打开的链接，请先生成网址';
                messageContainer.className = 'mt-3 text-sm text-red-600';
                document.getElementById('logistics-result').classList.remove('hidden');
                return;
            }
            
            // 批量打开链接
            currentLogisticsLinks.forEach(url => {
                window.open(url, '_blank');
            });
            
            // 显示提示信息
            const messageContainer = document.getElementById('logistics-message');
            messageContainer.textContent = `已批量打开 ${currentLogisticsLinks.length} 个链接`;
            messageContainer.className = 'mt-3 text-sm text-green-600';
        });

        // 功能二：输入对应单号数据（更新为双向映射）
        document.getElementById('save-mapping').addEventListener('click', function() {
            const input = document.getElementById('mapping-orders').value.trim();
            const messageContainer = document.getElementById('mapping-message');
            const countContainer = document.getElementById('mapping-count');
            const savedPairsElement = document.getElementById('saved-pairs');
            
            if (!input) {
                messageContainer.textContent = '请输入单号对应关系后再保存';
                messageContainer.className = 'mt-3 text-sm text-red-600';
                countContainer.classList.add('hidden');
                orderMappings = {};
                reverseMappings = {};
                return;
            }
            
            // 清空之前的映射
            orderMappings = {};
            reverseMappings = {};
            let validPairs = 0;
            let totalLines = 0;
            
            // 按行分割输入
            const lines = input.split('\n').filter(line => line.trim() !== '');
            totalLines = lines.length;
            
            // 处理每行的两个单号（后台单号 商家单号）
            lines.forEach(line => {
                // 使用正则分割（支持空格、制表符等）
                const parts = line.trim().split(/\s+/);
                if (parts.length === 2 && /^\d{19}$/.test(parts[0]) && /^\d{19}$/.test(parts[1])) {
                    // 正向映射：商家单号 -> 后台单号
                    orderMappings[parts[1]] = parts[0];
                    // 反向映射：后台单号 -> 商家单号
                    reverseMappings[parts[0]] = parts[1];
                    validPairs++;
                }
            });
            
            // 显示结果
            messageContainer.textContent = `成功保存 ${validPairs} 组有效单号对应关系（共 ${totalLines} 行）`;
            messageContainer.className = 'mt-3 text-sm text-green-600';
            savedPairsElement.textContent = validPairs;
            countContainer.classList.remove('hidden');
        });

        // 功能三：提取待取件单号并匹配
        document.getElementById('extract-orders').addEventListener('click', function() {
            const input = document.getElementById('order-content').value.trim();
            const resultContainer = document.getElementById('extraction-result');
            const linksContainer = document.getElementById('extracted-links');
            const messageContainer = document.getElementById('extraction-message');
            const copyButton = document.getElementById('copy-backend-orders');
            
            if (!input) {
                messageContainer.textContent = '请输入订单详情文本后再提取';
                messageContainer.className = 'mt-3 text-sm text-red-600';
                resultContainer.classList.remove('hidden');
                linksContainer.innerHTML = '';
                currentExtractedLinks = [];
                currentBackendOrders = [];
                copyButton.classList.add('hidden');
                return;
            }
            
            // 清空之前的结果
            linksContainer.innerHTML = '';
            currentExtractedLinks = [];
            currentBackendOrders = [];
            
            // 分割文本为段落，按订单分隔
            const orderBlocks = input.split(/\d{4}-\d{2}-\d{2}\s+订单号:/).filter(block => block.trim() !== '');
            
            // 遍历每个订单块，检查是否包含"待取件"
            orderBlocks.forEach(block => {
                // 提取订单号（19位数字）
                const orderMatch = block.match(/^\s*(\d{19})/);
                if (orderMatch && orderMatch[1]) {
                    const orderNumber = orderMatch[1];
                    // 检查当前订单块是否包含"待取件"
                    if (block.includes('待取件')) {
                        const url = `https://trade.tmall.com/detail/orderDetail.htm?spm=tbpc.boughtlist.order_detail.1.69092e8dK25SxJ&bizOrderId=${orderNumber}`;
                        currentExtractedLinks.push(url);
                        
                        // 查找匹配的后台单号
                        const backendOrder = orderMappings[orderNumber] || '未找到匹配的后台单号';
                        const hasMapping = !!orderMappings[orderNumber];
                        
                        // 如果找到匹配的后台单号，添加到数组中
                        if (hasMapping) {
                            currentBackendOrders.push(backendOrder);
                        }
                        
                        const linkElement = document.createElement('div');
                        linkElement.className = 'p-3 bg-white rounded border border-gray-100 hover:border-secondary/30 transition-colors mb-2';
                        linkElement.innerHTML = `
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-800">商家单号: ${orderNumber}</span>
                                <a href="${url}" target="_blank" class="text-secondary text-sm hover:underline flex items-center">
                                    <i class="fa fa-external-link mr-1"></i> 打开
                                </a>
                            </div>
                            <div class="text-sm ${hasMapping ? 'text-accent' : 'text-neutral-dark'}">
                                后台单号: ${backendOrder}
                            </div>
                        `;
                        linksContainer.appendChild(linkElement);
                    }
                }
            });
            
            // 控制复制按钮显示/隐藏
            if (currentBackendOrders.length > 0) {
                copyButton.classList.remove('hidden');
            } else {
                copyButton.classList.add('hidden');
            }
            
            // 显示结果和消息
            messageContainer.textContent = `成功提取 ${currentExtractedLinks.length} 个含"待取件"的单号，其中 ${currentBackendOrders.length} 个匹配到后台单号`;
            messageContainer.className = 'mt-3 text-sm text-green-600';
            resultContainer.classList.remove('hidden');
        });

        // 批量打开提取的订单链接
        document.getElementById('open-all-orders').addEventListener('click', function() {
            if (currentExtractedLinks.length === 0) {
                const messageContainer = document.getElementById('extraction-message');
                messageContainer.textContent = '没有可打开的链接，请先提取单号';
                messageContainer.className = 'mt-3 text-sm text-red-600';
                document.getElementById('extraction-result').classList.remove('hidden');
                return;
            }
            
            // 批量打开链接
            currentExtractedLinks.forEach(url => {
                window.open(url, '_blank');
            });
            
            // 显示提示信息
            const messageContainer = document.getElementById('extraction-message');
            messageContainer.textContent = `已批量打开 ${currentExtractedLinks.length} 个链接`;
            messageContainer.className = 'mt-3 text-sm text-green-600';
        });

        // 一键复制所有后台单号
        document.getElementById('copy-backend-orders').addEventListener('click', function() {
            if (currentBackendOrders.length === 0) {
                const messageContainer = document.getElementById('extraction-message');
                messageContainer.textContent = '没有可复制的后台单号';
                messageContainer.className = 'mt-3 text-sm text-red-600';
                return;
            }
            
            // 将所有后台单号用换行符连接
            const textToCopy = currentBackendOrders.join('\n');
            
            // 复制到剪贴板
            navigator.clipboard.writeText(textToCopy).then(() => {
                const messageContainer = document.getElementById('extraction-message');
                messageContainer.textContent = `已成功复制 ${currentBackendOrders.length} 个后台单号到剪贴板`;
                messageContainer.className = 'mt-3 text-sm text-green-600';
                
                // 按钮状态变化反馈
                const copyButton = document.getElementById('copy-backend-orders');
                const originalText = copyButton.innerHTML;
                copyButton.innerHTML = '<i class="fa fa-check mr-2"></i>已复制';
                copyButton.classList.add('bg-green-500');
                
                // 2秒后恢复原状
                setTimeout(() => {
                    copyButton.innerHTML = originalText;
                    copyButton.classList.remove('bg-green-500');
                }, 2000);
            }).catch(err => {
                console.error('复制失败:', err);
                const messageContainer = document.getElementById('extraction-message');
                messageContainer.textContent = '复制失败，请手动复制';
                messageContainer.className = 'mt-3 text-sm text-red-600';
            });
        });
    </script>
</body>
</html>